{extend name="common/common" /}

{block name="style"}
<style type="text/css">
.layui-form-pane .layui-form-label{
	height: 38px;
}
#cusTable tr {
	cursor: pointer;
}
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight col-md-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>添加罚款单</h5>
        </div>
        <div class="ibox-content">
			<div class="layui-tab layui-tab-card">
				<ul class="layui-tab-title">
					<li class="layui-this">职员罚款</li>
					<li>学员罚款</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<form class="layui-form layui-form-pane" action="" id="addForm">
							<div class="layui-form-item">
								<label class="layui-form-label">罚款金额</label>
								<div class="layui-input-inline">
									<input type="number" name="total_amount" value="" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">罚款部门</label>
								<div class="layui-input-inline">
									<input type="text" value="" class="layui-input selectDepart" readonly>
									<input type="hidden" class="layui-input" id="DepartId" readonly>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">罚款职员</label>
								<div class="layui-input-inline">
									<select id="selectRole" lay-filter="selectRole">
									<option value="">请选择职位</option>
									</select>
								</div>
								<div class="layui-input-inline">
									<select name="s_id" id="selectUser" lay-filter="selectUser">
									<option value="">请选择职员</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">罚款备注</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea" name="remarks"></textarea>
								</div>
							</div>
							<div class="layui-form-item text-center">
								<input type="hidden" name="s_role" value="1">
					            <button class="btn btn-primary" type="submit">提交</button>
							</div>
						</form>
					</div>
					<div class="layui-tab-item">
						<form class="layui-form layui-form-pane" action="" id="addForm_s">
							<div class="layui-form-item">
								<label class="layui-form-label">罚款金额</label>
								<div class="layui-input-inline">
									<input type="number" name="total_amount" value="" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">罚款学员</label>
								<div class="layui-input-inline">
									<input type="text" value="" class="layui-input" readonly id="selectST">
									<input type="hidden" name="s_id" value="" class="layui-input" readonly id="ST_id">
								</div>
							</div>
							<div class="layui-form-item layui-form-text">
								<label class="layui-form-label">罚款备注</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea" name="remarks"></textarea>
								</div>
							</div>
							<div class="layui-form-item text-center">
								<input type="hidden" name="s_role" value="0">
					            <button class="btn btn-primary" type="submit">提交</button>
							</div>
						</form>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>

<div class="laycontent" style="display: none;width: 300px;padding: 30px 15px;">
    <ul id="tree"></ul>
</div>

<div class="selectSTcontent" style="display:none;padding:15px;">
	<form class="layui-form" action="" id="seaForm">
		<div class="layui-form-item">
			<div class="layui-input-inline" style="width: 150px;">
				<input type="text" name="seaPhone" id="seaPhone" placeholder="手机" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 150px;">
				<input type="text" name="seaName" id="seaName" placeholder="学员姓名" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width:150px;">
				<select name="seaName" id="seaSchool" lay-filter="getMajor" >
					<option value="" selected>学校</option>
					{volist name="$CanseeSchool" id="v"}
					<option value="{$v.id}">{$v.name}</option>
					{/volist}
				</select>
			</div>
			<div class="layui-input-inline" style="width:150px;">
				<select name="seaMajor" id="seaMajor">
					<option value="" selected>专业</option>
				</select>
			</div>

			<div class="layui-inline">
				<button type="button" id="search" class="btn btn-info" style="margin-top: 2px;">查询</button>
			</div>
		</div>
	</form>
	<table id="cusTable">
		<thead>
			<th class="text-center" data-field="id">ID</th>
			<th class="text-center" data-field="name">学员姓名</th>
			<th class="text-center" data-field="school">学校</th>
			<th class="text-center" data-field="major">专业</th>
			<th class="text-center" data-field="phone">手机</th>
			<th class="text-center" data-field="sex_name">性别</th>
			<th class="text-center" data-field="school_roll_name">学籍状态</th>
		</thead>
	</table>
</div>
{/block}

{block name="script"}
<script>
$(function(){
	initTable();
	layui.use(['form','laydate','tree','element'], function(){
  		var form = layui.form,laydate = layui.laydate,element = layui.element;
		getTree(form);
		form.on('select(selectRole)', function(data){
			var role_id = data.value;
			var role_url = "{:url('department/getRoleUser')}?role_id=" + role_id;
			$.getJSON(role_url, function(res){
				var option_user = '<option value="">请选择职员</option>';
				for(i in res.data){
					option_user += '<option value="'+res.data[i].id+'">'+res.data[i].real_name+'</option>';
				}
				$('#selectUser').html(option_user);
				form.render();
			});
		});
		form.on('select(getMajor)',function(data){
			$.post('{:url("Finance/getMajorByPid")}',{pid:data.value},function(res){
				var op = '<option value="" selected>专业</option>';
				for(var i=0;i<res.data.length;i++){
					op += '<option value="'+res.data[i].id+'">'+res.data[i].name+'</option>';
				}
				$("#seaMajor").html(op);
				form.render();
			});
		});
  	});

	$('.selectDepart').on('click',function(){
		selectDepartBox = layer.open({
            type: 1,
            title: '请选择罚款人部门',
            anim: 2,
            skin: 'layui-layer-molv', //加上边框
            area: ['300px', '450px'], //宽高
            content: $(".laycontent")
        });
	});

	$("#selectST").on("click",function(){
		selectSTBox = layer.open({
            type: 1,
            title: '请选择罚款学员',
            anim: 2,
            skin: 'layui-layer-molv', //加上边框
            area: ['800px', '600px'], //宽高
            content: $(".selectSTcontent")
        });
	});

	$('#addForm').on('submit',function(){
		var params = $('#addForm').serialize();
		$.post('./addTicket',params,function(res){
			if(res.code == 1){
				layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    layer.closeAll();
					window.history.back();
                });
			}else{
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});
	$('#addForm_s').on('submit',function(){
		var params = $('#addForm_s').serialize();
		$.post('./addTicket',params,function(res){
			if(res.code == 1){
				layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    layer.closeAll();
					window.history.back();
                });
			}else{
				layer.msg(res.msg, {anim: 6});
			}
		});
		return false;
	});

	$("#search").bind("click", initTable);
});
function getTree(form){
    $.getJSON("{:url('department/index')}", function(res){
        layui.tree({
            elem: '#tree',
			nodes: res.data,
			click: function(node){
                nowNode = node;
				$('.selectDepart').val(node.name);
				$('#DepartId').val(node.id);
				var depart_url = "{:url('department/getDepartRoles')}?depart_id=" + node.id;
				$.getJSON(depart_url, function(res){
					var option_role = '<option value="">请选择职位</option>';
					for(i in res.data){
						option_role += '<option value="'+res.data[i].id+'">'+res.data[i].role_name+'</option>';
					}
					$('#selectRole').html(option_role);
					form.render();
				});
				layer.close(selectDepartBox);
            }
        });
    });
}

function initTable() {
	//先销毁表格
	$('#cusTable').bootstrapTable('destroy');
	//初始化表格,动态从服务器加载数据
	$("#cusTable").bootstrapTable({
		method: "get", //使用get请求到服务器获取数据
		url: "{:url('education/student')}", //获取数据的地址
		striped: true, //表格显示条纹
		pagination: true, //启动分页
		pageSize: 10, //每页显示的记录数
		pageNumber: 1, //当前第几页
		pageList: [5, 10, 15, 20, 25], //记录数可选列表
		sidePagination: "server", //表示服务端请求
		paginationFirstText: "首页",
		paginationPreText: "上一页",
		paginationNextText: "下一页",
		paginationLastText: "尾页",
		queryParamsType: "undefined",
		queryParams: function queryParams(params) { //设置查询参数
			var param = {
				pageNumber: params.pageNumber,
				pageSize: params.pageSize,
				seaName: $("#seaName").val(),
				seaPhone: $("#seaPhone").val(),
				seaSchool: $("#seaSchool").val(),
				seaMajor: $("#seaMajor").val(),
				seaBatch:'',
				seaClass:'',
				seaSchoolRoll:'',
				seaRollStatus:''
			};
			return param;
		},
		onLoadSuccess: function(res) { //加载成功时执行
			if (111 == res.code) {
				window.location.reload();
			}
			layer.msg("加载成功", {
				time: 1000
			});
		},
		onLoadError: function() { //加载失败时执行
			layer.msg("加载数据失败");
		},
		onDblClickRow: function(row) {
			$("#selectST").val(row.name);
			$("#ST_id").val(row.id);
			layer.close(selectSTBox);
		}
	});
}
</script>
{/block}
